<template>
  <div class="message-wrapper" :class="messagePosition">
    <message-header v-if="showMessageHeader && !isMine" :message="message" />
    <div class="columnText" :class="isMine ? 'rightten' : 'leftten'">
      <div class="msg-content">
        <message-status-icon :message="message" />
        <text-element v-if="message.type === TIM.TYPES.MSG_TEXT" :isMine="isMine" :payload="message.payload" />
        <SoundPlay v-else-if="
            message.type === TIM.TYPES.MSG_FILE &&
            message.payload.fileName &&
            (message.payload.fileName.indexOf('mp3') >= 0 ||
              message.payload.fileName.indexOf('aac') >= 0)
          " :flow="message.flow" :payload="message.payload"></SoundPlay>
        <image-element v-else-if="message.type === TIM.TYPES.MSG_IMAGE" :payload="message.payload" />
        <video-element v-else-if="message.type === TIM.TYPES.MSG_VIDEO" :payload="message.payload" />
        <image-element2 v-else-if="message.type === TIM.TYPES.MSG_CUSTOM && message.payload.data == 'piclinkmes'" :payload="message.payload" />
        <file-element v-else-if="message.type === TIM.TYPES.MSG_FILE" :payload="message.payload" />
        <sound-element v-else-if="message.type === TIM.TYPES.MSG_SOUND" :payload="message.payload" />
        <group-tip-element v-else-if="message.type === TIM.TYPES.MSG_GRP_TIP" :payload="message.payload" />
        <group-system-notice-element v-else-if="message.type === TIM.TYPES.MSG_GRP_SYS_NOTICE" :payload="message.payload" :message="message" />
        <custom-element v-else-if="message.type === TIM.TYPES.MSG_CUSTOM" :payload="message.payload" />
        <face-element v-else-if="message.type === TIM.TYPES.MSG_FACE" :payload="message.payload" />
        <span v-else>暂未支持的消息类型：{{ message.type }}</span>
      </div>
      <!-- {{ message }} -->
      <span class="timeTextx" style="margin-left: 12px">{{
        message.time | getTimeFormat
      }}</span>
      <div v-if="isMine" class="readStatus">
        {{ message.isPeerRead ? "已读" : "未读" }}
      </div>
      <div v-if="!isMine" class="readStatus">已读</div>
    </div>
    <div class="posit">
      <message-header v-if="showMessageHeader && isMine" :message="message" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import MessageStatusIcon from "./message-status-icon.vue";
import MessageHeader from "./message-header";
import FileElement from "./message-elements/file-element.vue";
import FaceElement from "./message-elements/face-element.vue";
import ImageElement from "./message-elements/image-element.vue";
import ImageElement2 from "./message-elements/image-element2.vue";
import TextElement from "./message-elements/text-element.vue";
import SoundElement from "./message-elements/sound-element.vue";
import VideoElement from "./message-elements/video-element.vue";
import GroupTipElement from "./message-elements/group-tip-element.vue";
import GroupSystemNoticeElement from "./message-elements/group-system-notice-element.vue";
import CustomElement from "./message-elements/custom-element.vue";
import SoundPlay from "./message-elements/soundPlay.vue";
export default {
  name: "MessageItem",
  props: {
    message: {
      type: Object,
      required: true,
    },
  },
  components: {
    MessageHeader,
    MessageStatusIcon,
    FileElement,
    FaceElement,
    ImageElement,
    TextElement,
    SoundElement,
    GroupTipElement,
    GroupSystemNoticeElement,
    CustomElement,
    SoundPlay,
    ImageElement2,
    VideoElement
  },
  data () {
    return {
      renderDom: [],
    };
  },
  computed: {
    ...mapState({
      currentConversation: (state) => state.conversation.currentConversation,
      currentUserProfile: (state) => state.user.currentUserProfile,
    }),
    isMine () {
      return this.message.flow === "out";
    },
    messagePosition () {
      if (
        ["TIMGroupTipElem", "TIMGroupSystemNoticeElem"]
          .includes
          // this.message.elements[0].type  这一行暂时不知道有什么意义 写着会报错 不写不报错 且未发现问题
          ()
      ) {
        return "position-center";
      }
      if (this.isMine) {
        return "position-right";
      } else {
        return "position-left";
      }
    },
    showMessageHeader () {
      // if(this.message.elements instanceof Array&&this.message.elements.length>0){

      // }
      if (
        ["TIMGroupTipElem", "TIMGroupSystemNoticeElem"]
          .includes
          // this.message.elements[0].type  // 这一行暂时不知道有什么意义 写着会报错 不写不报错 且未发现问题
          ()
      ) {
        return false;
      }
      return true;
    },
  },
};
</script>

<style lang="less" scoped>
.message-wrapper {
  display: flex;
  /* flex-direction: column; */
  flex-direction: column;
  margin: 12px 0;
  position: relative;
}
.posit {
}
.position-left {
  align-items: flex-start;
  flex-direction: row;

  .from {
    margin-top: 10px;
  }
  .msg-content {
    background: rgb(246, 249, 249) !important;
    color: rgb(90, 92, 97) !important;
    border: 1px solid rgb(204, 216, 241);
    border-radius: 5px;
  }
  .timeTextx {
    text-align: left;
    //   color: rgb(120, 120, 120);
    //   margin-top: 5px;
  }
}
.text-element-wrapper {
  text-align: left;
}
.position-right {
  //   align-items: flex-end;
  position: relative;
  flex-direction: row;
  justify-content: flex-end;
  //   padding-right: 30px;
  .from {
    margin-top: -10px !important;
  }
  .timeTextx {
    text-align: right;
    //   color: rgb(120, 120, 120);
    //   margin-top: 5px;
  }
  .msg-content {
    background: rgb(64, 158, 255) !important;
    color: #fff !important;
  }
}
.position-center {
  align-items: center;
}
.msg-content {
  display: flex;
  align-items: center;
}

.timeTextx {
  color: rgb(120, 120, 120);
  margin-top: 5px;
}
.columnText {
  display: flex;
  flex-direction: column;
  // margin-left: 10px;
}
.posit {
  //   margin-top: -50px;
  position: absolute;
  top: 20px;
}
.rightten {
  margin-right: 10px;
  position: relative;
  padding-right: 35px;
  .readStatus {
    position: absolute;
    color: rgb(110, 121, 129);
    left: -45px;
    top: 20px;
  }
  // margin-top: -10px;
  &::after {
    content: "";
    width: 15px;
    height: 15px;
    // background-color: rgb(89, 204, 248);
    background-color: rgb(64, 158, 255);
    position: absolute;
    right: 30px;
    // right: 0;
    top: 20px;
    transform: rotate(45deg);
  }
}
.leftten {
  margin-left: 10px;
  position: relative;
  z-index: 20;
  .readStatus {
    position: absolute;
    color: rgb(110, 121, 129);
    right: -45px;
    top: 20px;
  }
  &::after {
    content: "";
    width: 15px;
    height: 15px;
    background-color: rgb(246, 249, 249);
    position: absolute;
    border: 1px solid rgb(204, 216, 241);
    z-index: -1;
    left: -5px;
    // right: 0;
    top: 20px;
    transform: rotate(45deg);
  }
  &::before {
    content: "";
    width: 2px;
    height: 16px;
    background-color: rgb(246, 249, 249);
    position: absolute;
    top: 20px;
    left: 0px;
    z-index: 10;
  }
}
</style>
